<template>
	<view class="app_Cont">
		<scroll-view class="showCont" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="10" v-if="showCont">
			<view class="recordCont">
				<view class="recordHead">
					<view class="recordTitle">培训核销记录({{total}})</view>
					<view class="recordMore">
						<view class="headTime" @click="showDate = true">
							{{pickerDate?pickerDate:'选择日期'}}
						</view>
					</view>
				</view>
				<view class="recordList">
					<view :class="index==0?'workItem noTop':'workItem'" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
						<view class="workHead">
							<view class="workName">海员晋升培训</view>
							<view class="workDes">{{item.sign_number}}</view>
						</view>
						<view class="workInfo">
							<view class="infoItem">
								<view class="infoName">学员姓名</view>
								<view class="infoText">{{item.real_name}}</view>
							</view>
							<view class="infoItem">
								<view class="infoName">核销人员</view>
								<view class="infoText">{{item.school_admin_name}}</view>
							</view>
							<view class="infoItem">
								<view class="infoName">核销时间</view>
								<view class="infoText">{{item.create_time}}</view>
							</view>
						</view>
					</view>
					<noData v-if="listArr.length==0&&!isChange"></noData>
					<loadMore v-if="!isChange&&last_page==page"></loadMore>
				</view>
			</view>
		</scroll-view>
		<load v-if="!showCont||isChange"></load>
		<subLoad v-if="showSub"></subLoad>
		<u-picker :show="showDate" @confirm="sureDate" @cancel="showDate = false" @close="showDate = false" :closeOnClickOverlay="true" :columns="dateArr"></u-picker>
	</view>
</template>

<script>
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	import noData from '@/components/noData.vue'
	import subLoad from '@/components/sub.vue'
	import loadMore from '@/components/loadMore.vue'
	export default {
		components:{load,noData,loadMore,subLoad},
		data() {
			return {
				showCont:false,
				showDate:false,
				showSub:false,
				pickerDate:'',
				dateArr:[
					['一个月内','三个月内','半年内','一年内','全部']
				],
				isChange:false,
				page:1,
				per_page:10,
				total:0,
				last_page:0,
				listArr:[],
			};
		},
		methods:{
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++
					this.isChange = true
					this.getData()
				}
			},
			sureDate(e){
				this.pickerDate = e.value[0]=='全部'?'':e.value[0]
				this.showDate = false
				this.serchFn()
			},
			serchFn(){
				this.listArr = []
				this.isChange = true
				this.page = 1
				this.getData()
			},
			detailFn(item){
				uni.navigateTo({
					url: 'schoolRecordDetail/schoolRecordDetail?id='+item.verification_record_id
				});
			},
			getData(){
				let type = ''
				if(this.pickerDate == '一个月内'){
					type=1
				}else if(this.pickerDate == '三个月内'){
					type=2
				}else if(this.pickerDate == '半年内'){
					type=3
				}else if(this.pickerDate == '一年内'){
					type=4
				}
				let data = {
					type:type,
					page:this.page,
					per_page:this.per_page,
				}
				api.getRequst(data,'/api/School/moreVerificationRecord').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
						this.total = res.data.total
					}
					this.showCont = true
					this.isChange = false
					
				})
			}
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="less">
.showCont{
	padding-bottom:30rpx;
	padding-top: 30rpx;
	height: 100vh;
	overflow-y: auto;
	box-sizing: border-box;
	.recordCont{
		width: 92%;
		padding: 30rpx 4% 20rpx;
		margin: 0rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		.recordHead{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.recordTitle{
				font-size: 30rpx;
				font-weight: bold;
			}
			.recordMore{
				.headTime{
					color: #3f55cc;
					font-size: 24rpx;
				}
			}
		}
		.recordList{
			.workItem{
				padding: 30rpx 0;
				border-top:2rpx dashed #ddd;
				.workHead{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.workName{
						width: 100rpx;
						font-size: 28rpx;
						font-weight: bold;
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 30rpx;
					}
					.workDes{
						font-size: 24rpx;
					}
				}
				.workInfo{
					.infoItem{
						display: flex;
						align-items: center;
						margin-top: 15rpx;
						justify-content: space-between;
						.infoName{
							width: 120rpx;
							margin-right: 15rpx;
							color: #666;
						}
						.infoText{
							.redText{
								color: #ff5757;
							}
						}
						
					}
				}
			}
			.noTop{
				border-top:none;
			}
		}
	}
}
</style>
